<template>
  <div>
    <a-form :model="formState" ref="smsForm" v-bind="formItemLayout">
      <a-form-item name="keyword2" label="预约项目">
        <a-input v-model:value="formState.keyword2" />
      </a-form-item>
      <a-form-item name="keyword3" label="预约结果">
        <a-input v-model:value="formState.keyword3" />
      </a-form-item>
      <a-form-item name="url" label="链接">
        <a-input v-model:value="formState.url" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab7" setup>
import { onMounted, ref } from 'vue';
import { getConfig, configSave } from '../data/config.api';

const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 10 },
};
const formState = ref({
  keyword2: '',
  keyword3: '',
  url: '',
});

onMounted(() => {
  setData();
});

/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getConfig({
    configType: 'travel',
  }).then(data => {
    formState.value = JSON.parse(data.travelInfo);
  });
}

/**
 * 表单提交
 */
async function handleSubmit() {
  let data = {
    configKey: '',
    configVal: '',
  };
  data.configKey = 'travelInfo';
  data.configVal = JSON.stringify(formState.value);
  configSave(data).then(() => {});
}
</script>
